import React, { Component } from 'react';
import pic from  '../assets/1.jpg'
import '../styles/Cate.scss'
class Cate extends Component {


    constructor(props){
    super(props)
     this.state={
        currentIndex:0,
        catelist:[
          {
            name:'美容护肤',
            list2:[
                {
                    name:'面部护理',
                    list3:[
                        {pic,name:'卸妆'},{pic,name:'洁面/去角质'},{pic,name:'爽肤水/喷雾'},{pic,name:'精华/精油'},
                        {pic,name:'面霜'},{pic,name:'面膜'},{pic,name:'防晒隔离'},{pic,name:'润唇膏/唇膜'},{pic,name:'面部套装'},{pic,name:'其他面部'},
                    ]
                },
                {
                    name:'手部护理',
                    list3:[
                        {pic,name:'卸妆'},{pic,name:'洁面/去角质'},{pic,name:'爽肤水/喷雾'},{pic,name:'精华/精油'},
                        {pic,name:'面霜'},{pic,name:'面膜'},{pic,name:'防晒隔离'},{pic,name:'润唇膏/唇膜'},{pic,name:'面部套装'},{pic,name:'其他面部'},
                    ]
                },
            ]
          },

          {
            name:'彩妆',
            list2:[
                {
                    name:'化妆品',
                    list3:[
                        {pic,name:'迪奥'},{pic,name:'梵纪喜'},{pic,name:'爽肤水/喷雾'},{pic,name:'精华/精油'},
                        {pic,name:'面霜'},{pic,name:'面膜'},{pic,name:'防晒隔离'},{pic,name:'润唇膏/唇膜'},{pic,name:'面部套装'},{pic,name:'其他面部'},
                    ]
                },
                {
                    name:'眼影',
                    list3:[
                        {pic,name:'卸妆'},{pic,name:'洁面/去角质'},{pic,name:'爽肤水/喷雾'},{pic,name:'精华/精油'},
                        {pic,name:'面霜'},{pic,name:'面膜'},{pic,name:'防晒隔离'},{pic,name:'润唇膏/唇膜'},{pic,name:'面部套装'},{pic,name:'其他面部'},
                    ]
                }
            ]
          },


        ]

     }


    }
    cateClick(index){
        this.setState({currentIndex:index})
    }
    render() {
        return (
            <div className='cate'>
                <div className="left">
                    {
                        this.state.catelist.map((item,index)=>{
                            return(
                                  <div className={'name ' + (this.state.currentIndex==index ? 'active' : '')} key={index}  onClick={()=>{this.cateClick(index)}} >{item.name}</div>
                            )
                        })
                    }
                </div>
                <div className="right">
                    {
                        this.state.catelist[ this.state.currentIndex ].list2.map((item2,index)=>{
                            return(
                                <div className="list2" key={index}>
                                    <h3>{item2.name}</h3>
                                    <div className="list3">
                                        {
                                            item2.list3.map((item3,index)=>{
                                                return(
                                                    <div className="item3" key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="name">{item3.name}</div>
                                                    </div>
                                                )
                                            })

                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                
            </div>
        );
    }
}

export default Cate;